<template>
    <div style="width: 100%;">
        <!-- 搜索表单 -->
        <el-form :inline="true" ref="formRef" :model="formSearch" class="demo-form-inline">
            <el-form-item label="审核状态">
                <el-select v-model="formSearch.audit" placeholder="请选择" clearable>
                    <el-option v-for="item in auditList" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="招聘时间">
                <el-date-picker style="width: 250px;" v-model="formSearch.time" type="daterange" range-separator="至"
                    start-placeholder="开始时间" end-placeholder="结束时间" />
            </el-form-item>
            <el-form-item class="search">
                <el-button type="primary" :icon="Refresh" @click="resetFormInline">重置</el-button>
                <el-button type="primary" :icon="Search" @click="searchData">查询</el-button>
            </el-form-item>
        </el-form>
        <!-- 按钮组 -->
        <div class="btn-group">
            <el-button type="primary" @click="handleAdd">新增</el-button>
        </div>
        <!-- 表格 -->
        <div class="table">
            <el-table :data="tableData" style="width: 100%" border height="420" show-overflow-tooltip>
                <el-table-column fixed label="索引" type="index" :index="indexMethod" align="center" width="55" />
                <el-table-column prop="time" label="申请时间" :formatter="formatTime" />
                <el-table-column prop="staff_name" label="申请人" />
                <el-table-column prop="post" label="招聘岗位" />
                <el-table-column prop="num" label="招聘人数" />
                <el-table-column prop="requirement" label="招聘要求" />
                <el-table-column prop="audit" label="审核状态">
                    <template #default="{ row }">
                        <el-tag :type="getTagType(row.audit)">{{ formatStatus(row.audit) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150">
                    <template #default="scope">
                        <el-button type="primary" @click="handleDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagination-wrapper">
            <el-pagination class="pagination" v-model:current-page="page.pageNum" v-model:page-size="page.pageSize"
                :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <!-- 弹窗-详情 -->
        <el-dialog class="dialog" v-model="dialogVisible" title="详情" width="800" @close="handleClose">
            <el-form class="dialog-form" :inline="true" :model="dialogForm" ref="dialogFormRef">
                <el-form-item label-width="120px" label="工号">
                    <el-input v-model="dialogForm.staffNo" />
                </el-form-item>
                <el-form-item label-width="120px" label="姓名">
                    <el-input v-model="dialogForm.name" />
                </el-form-item>
                <el-form-item label-width="120px" label="部门">
                    <el-input v-model="dialogForm.departmentName" />
                </el-form-item>
                <el-form-item label-width="120px" label="职位">
                    <el-input v-model="dialogForm.position" />
                </el-form-item>
                <el-form-item label-width="120px" label="申请时间">
                    <el-input v-model="dialogForm.time" />
                </el-form-item>
                <el-form-item label-width="120px" label="招聘岗位">
                    <el-input v-model="dialogForm.post" />
                </el-form-item>
                <el-form-item label-width="120px" label="招聘人数">
                    <el-input v-model="dialogForm.num" />
                </el-form-item>
                <el-form-item label-width="120px" label="招聘要求">
                    <el-input style="width: 220px;" v-model="dialogForm.requirement" type="textarea" />
                </el-form-item>
                <el-form-item label-width="120px" label="招聘流程">
                    <el-input style="width: 220px;" v-model="dialogForm.process" type="textarea" />
                </el-form-item>
                <el-form-item label-width="120px" label="审核状态">
                    <el-input v-model="dialogForm.audit" :formatter="formatStatus" />
                </el-form-item>
                <el-form-item label-width="120px" label="审核回复">
                    <el-input style="width: 220px;" v-model="dialogForm.review_responses" type="textarea" />
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 弹窗-新增 -->
        <el-dialog class="dialog" v-model="dialogApprovalVisible" title="招聘申请" width="400" @close="handleApprovalClose">
            <el-form class="dialog-form" :model="dialogApprovalForm" ref="dialogApprovalFormRef">
                <el-form-item label-width="80px" label="招聘部门">
                    <el-input v-model="dialogApprovalForm.department_name" disabled />
                </el-form-item>
                <el-form-item label-width="80px" label="招聘岗位">
                    <el-input v-model="dialogApprovalForm.post" disabled />
                </el-form-item>
                <el-form-item label-width="80px" label="招聘人数">
                    <el-input v-model="dialogApprovalForm.num" />
                </el-form-item>
                <el-form-item label-width="80px" label="招聘要求">
                    <el-input v-model="dialogApprovalForm.requirement" type="textarea" />
                </el-form-item>
                <el-form-item label-width="80px" label="招聘流程">
                    <el-input v-model="dialogApprovalForm.process" type="textarea" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleApprovalClose">关闭</el-button>
                    <el-button type="primary" @click="addDialog">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { queryRecruitmentPlan, addRecruitmentPlan } from '@/api/recruitmentplan'
import { timeProcessing } from '@/utils/date'
import { useUserStore } from '@/store/user';

const userStore = useUserStore();
const info = computed(() => userStore.userInfo);

// 分页
const page = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0,
})

// 表单-搜索-ref
const formRef = ref(null)

// 表单-搜索-数据
const formSearch = reactive({
    staffName: info.value.staff_name,
    position: info.value.position,
    audit: '',
    time: null
})

// 审核状态
const auditList = reactive([
    { label: '驳回', value: 0 },
    { label: '通过', value: 2 },
    { label: '未通过', value: 1 }
])

// 表格数据
const tableData = ref([])

// 详情-弹窗
const dialogVisible = ref(false)
const dialogFormRef = ref(null)
const dialogForm = reactive({})

// 多选-id
const ids = ref([]);

const dialogApprovalVisible = ref(false)
const dialogApprovalFormRef = ref(null)
const dialogApprovalForm = reactive({})

// 表格索引
const indexMethod = (index) => {
    return page.pageSize * (page.pageNum - 1) + index + 1
}

// 格式化时间
const formatTime = (row, column, cellValue) => {
    return timeProcessing(cellValue, "date")
}

// 格式化审核状态
const formatStatus = (status) => {
    let str = '';
    if (status == 0) str = '未审核';
    if (status == 1) str = '驳回';
    if (status == 2) str = '通过';
    return str
}

// 重置
const resetFormInline = () => {
    formSearch.audit = '';
    formSearch.time = null;
    searchData();
}

// 搜索
const searchData = async () => {
    const data = {
        position: formSearch.position,
        staffName: formSearch.staffName,
        audit: formSearch.audit,
        timeStart: formSearch.time ? timeProcessing(formSearch.time[0], 'date') : '',
        timeEnd: formSearch.time ? timeProcessing(formSearch.time[1], 'date') : '',
        pageNum: page.pageNum,
        pageSize: page.pageSize,
    }
    try {
        const res = await queryRecruitmentPlan(data);
        if (res.code === 0) {
            tableData.value = res.data.list;
            page.total = res.data.total;
        } else {
            ElMessage.error(res.msg);
        }
    } catch {
        console.log("请求失败");
    }
}

// 详情-弹窗-打开
const handleDetail = (row) => {
    dialogVisible.value = true;
    dialogForm.staffNo = row.staff_no;
    dialogForm.name = row.staff_name;
    dialogForm.position = row.position;
    dialogForm.post = row.post;
    dialogForm.departmentName = row.department_name;
    dialogForm.time = timeProcessing(row.time);
    dialogForm.num = row.num;
    dialogForm.requirement = row.requirement;
    dialogForm.process = row.process;
    dialogForm.audit = row.audit;
    dialogForm.review_responses = row.review_responses;
}

// 详情-弹窗-关闭
const handleClose = () => {
    dialogVisible.value = false;
    if (dialogFormRef.value) dialogFormRef.value.resetFields();
}

const handleAdd = () => {
    dialogApprovalVisible.value = true;
    let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
    dialogApprovalForm.department_name = userInfo.department_name;
    dialogApprovalForm.post = userInfo.position;
}

const handleApprovalClose = () => {
    dialogApprovalVisible.value = false;
    if (dialogApprovalFormRef.value) dialogApprovalFormRef.value.resetFields();
    // 清空旧数据
    Object.keys(dialogApprovalForm).forEach(key => {
        dialogApprovalForm[key] = '';
    });
}

const addDialog = async () => {
    let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
    dialogApprovalForm.staff_no = userInfo.staff_no;
    dialogApprovalForm.staff_name = userInfo.staff_name;
    dialogApprovalForm.position = userInfo.position;
    try {
        const res = await addRecruitmentPlan(dialogApprovalForm);
        if (res.code === 0) {
            ElMessage.success('申请成功！');
            handleApprovalClose();
            searchData();
        } else {
            ElMessage.error(res.msg);
        }
    } catch { console.log("请求失败"); }
}
const getTagType = (val) => {
    if (val === 0) return 'info';
    if (val === 1) return 'danger';
    if (val === 2) return 'success';
    return '';
}

// 分页
const handleSizeChange = (val) => {
    page.pageSize = val
    searchData()
}

const handleCurrentChange = (val) => {
    page.pageNum = val
    searchData()
}

onMounted(() => {
    if (Object.keys(info.value).length > 0) {
        formSearch.position = info.value.position;
        formSearch.staffName = info.value.staff_name;
    } else {
        let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
        formSearch.position = userInfo.position;
        formSearch.staffName = userInfo.staff_name;
        info.value.position = userInfo.position;
        info.value.staff_name = userInfo.staff_name;
    }
    searchData();
})
</script>

<style lang="scss" scoped>
.demo-form-inline {
    padding: 10px 20px 0;
}

.demo-form-inline .el-input {
    --el-input-width: 150px;
}

.demo-form-inline .el-select {
    --el-select-width: 150px;
}

.btn-group {
    box-sizing: border-box;
    padding-right: 20px;
    margin-bottom: 5px;
    margin-top: -15px;
    float: right;
}

.table {
    box-sizing: border-box;
    padding: 0 20px 0 15px;
}

.footer {
    position: relative;
    width: 100%;
    height: auto;
}

.pagination-wrapper {
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: flex-end;
}

.pagination {
    margin-top: 15px;
    margin-right: 20px;
}

:deep(.el-dialog__body) {
    display: flex;
    justify-content: center;
}

.dialog-form {
    .el-input {
        --el-input-width: 220px;
    }
}
</style>